<template>
	<view class="container">
		<view class="bg"></view>
		<view class="main" style="z-index: 2; position: relative;">
			<view class="box" style="z-index: 2; position: relative;">
				<view class="box-header">
					<view class="box-header-left">
						<image :src="info.icon" mode="aspectFill"></image>
					</view>
					<view class="box-header-right">
						<view class="title">
							{{ info.name }}
						</view>
						<view class="info">
							<view>
								<text>最高额度：</text>
								<text style="color: #FF0000;">{{ info.money || '--' }}万</text>
							</view>
							<view>
								<text>年化利率：</text>
								<text>{{ info.interest }}%</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tip">
					{{ info.repayment }}
				</view>
			</view>
			<scroll-view :scroll-top="0" scroll-y="true" class="content" style="height: calc(100vh - 420rpx);">
				<view class="content-desc" v-html="info.content">
				</view>
			</scroll-view>
		</view>
		<view class="footer">
			<view class="footer-nav">
				<view class="footer-nav-left" @click="handleGoHome">
					<image src="@/static/tabbar/tab1.png" mode="aspectFill"></image>
					<view>首页</view>
				</view>
				<view class="footer-nav-right">
					<view class="btn1" @click="goSearch">
						配方案
					</view>
					<view class="btn2" @click="handleApply">
						立即申请
					</view>
				</view>
			</view>
		</view>
		<liu-drag-button @clickBtn="goKefu" bottomPx="500" rightPx="14">
			<image src="@/static/kefu.png" mode="aspectFill" style="width: 78rpx;height: 82rpx;"></image>
		</liu-drag-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const id = ref(null)
	const info = ref({})
	onLoad(async (options) => {
		id.value = options.id
		await getDetails()
	})
	// 获取详情
	const getDetails = async () => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.productDetail',
				type: 3,
				id: id.value
			});
			info.value = res.data
		} catch (e) {
			//TODO handle the exception
		}
	}
	const handleApply = () => {
		uni.navigateTo({
			url: `/pages/product/apply?id=${id.value}`
		})
	}
	const handleGoHome = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const goSearch = () => {
		uni.navigateTo({
			url: `/pages/option/search`
		})
	}

	const goKefu = () => {
		getHttpApi({
			route: 'video.kefEwm',
			type: '7',
			uuid: '0'
		}).then(res => {
			window.location.href = res.data.kef_url
		})
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.bg {
		background-color: #1A64FF;
		height: 364rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		/* 降低 bg 的层级 */
	}

	.tip {
		background: #FFF6EA;
		border-radius: 4rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #E18A03;
		line-height: 22rpx;
		padding: 8rpx 10rpx;
		margin-top: 30rpx;
	}

	.container {
		position: relative;
		z-index: 1;
		/* 确保父容器的层级高于 bg */
	}

	.main {
		position: relative;
		z-index: 2;
		padding: 26rpx;
		/* 确保 main 的层级高于 bg */
	}

	.box {
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #F1F5FF;
		border-radius: 10rpx;
		position: relative;
		z-index: 2;
		/* 确保 box 的层级高于 bg */
		padding: 30rpx 22rpx 44rpx;

		&-header {
			display: flex;

			&-left {
				width: 84rpx;
				height: 84rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			&-right {
				flex: 1;
			}
		}
	}

	.title {
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
		margin-bottom: 12rpx;
	}

	.info {
		font-weight: 400;
		font-size: 24rpx;
		color: #6F7283;
		line-height: 28rpx;
		display: flex;
		justify-content: space-between;
	}

	.content {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;

		&-title {
			padding: 38rpx 16rpx 0;
		}

		&-desc {
			padding: 26rpx;

			&-item {
				display: flex;
			}
		}

		.label {
			color: #0E0E0E;
			font-size: 26rpx;
		}

		.value {
			color: #0E0E0E;
			font-size: 26rpx;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		z-index: 99;

		&-nav {
			padding: 16rpx 24rpx 16rpx 44rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				text-align: center;

				&>image {
					width: 48rpx;
					height: 48rpx;
				}

				&>view {
					font-weight: 400;
					font-size: 22rpx;
					color: #6F7283;
					line-height: 40rpx;
					text-align: center;
				}
			}

			&-right {
				display: flex;
			}
		}

	}

	.btn1 {
		width: 236rpx;
		height: 68rpx;
		border-radius: 200rpx;
		border: 2rpx solid #1A64FF;
		line-height: 68rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #1A64FF;
		box-sizing: border-box;
		margin-right: 22rpx;
	}

	.btn2 {
		width: 296rpx;
		height: 68rpx;
		background: #1A64FF;
		border-radius: 200rpx;
		text-align: center;
		line-height: 68rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>